<template>
  <div class="login">
    <div class="box">
      <div class="wrap">
        <div class="photo"></div>
        <div class="form">
          <h2>多商户管理系统</h2>
          <el-form
            :model="loginFormData"
            :rules="loginFormRules"
            ref="loginForm"
          >
            <el-form-item prop="username">
              <el-input
                v-model="loginFormData.username"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginFormData.password"
                placeholder="请输入密码"
                prefix-icon="el-icon-lock"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="5">
                <el-col :span="16">
                  <el-input
                    v-model="loginFormData.captcha_code"
                    placeholder="请输入验证码"
                    prefix-icon="el-icon-key"
                  ></el-input>
                </el-col>
                <el-col :span="8">
                  <div
                    v-html="captcha_img"
                    @click="getCaptcha({ key: loginFormData.captcha_key })"
                  ></div>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" block @click="getLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { defineComponent, getCurrentInstance, ref } from "vue";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    let loginForm = ref("null"), //登陆表单ref
      loginFormData = ref({
        //登录表单数据
        username: "admin",
        password: "12345",
        captcha_code: "",
        captcha_key: "",
      }),
      captcha_img = ref(""),
      loginFormRules = ref({
        //登录表单验证
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        captcha_code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
      });

    //获取验证码
    const getCaptcha = async (key) => {
      const data = await proxy.$api.reqCaptcha(key);
      if (data.data.code !== 0) return;
      captcha_img.value = data.data.data.img;
      loginFormData.value.captcha_key = data.data.data.key;
    };
    getCaptcha();

    //管理员登录

    const getLogin = () => {
      proxy.$refs.loginForm.validate(async (valid) => {
        if (!valid) return console.log("error submit!!");
        const data = await proxy.$api.reqLogin(loginFormData.value);
        if (data.data.code !== 0) {
          getCaptcha();
          return ElMessage.error(data.data.message);
        }
        ElMessage.success(data.data.message);
        sessionStorage.setItem("token", data.data.data.token);
        proxy.$router.replace("/");
      });
    };

    return {
      captcha_img,
      loginForm,
      loginFormData,
      loginFormRules,
      getCaptcha,
      getLogin,
    };
  },
});
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  display: flex;
  background-color: #f6f8f9;
  .box {
    margin: auto;
    .wrap {
      display: flex;
      width: 800px;
      box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
      .photo {
        flex: 1;
        align-self: stretch;
        position: relative;
        background-color: pink;
        overflow: hidden;
      }
      .photo::after {
        content: "平台端";
        display: block;
        position: absolute;
        top: 30px;
        left: -100px;
        width: 300px;
        height: 40px;
        background-color: rgb(24, 144, 255);
        transform: rotate(-45deg);
        color: #ffffff;
        line-height: 40px;
        text-align: center;
      }
      .form {
        flex: 0 0 320px;
        padding: 0 30px 1px;
        background-color: #ffffff;
        h2 {
          font-size: 18px;
          font-weight: bold;
          line-height: 60px;
          text-align: center;
        }
        .el-button {
          width: 100%;
        }
      }
    }
  }
}
</style>
